తెలుగు

వైకల్యాలున్న వినియోగదారులతో సహా అందరి వినియోగాన్ని నిర్ధారించడానికి, హోవర్ మరియు ఫోకస్ స్థితులను ఉపయోగించి అందుబాటులో ఉండే టూల్‌టిప్‌లను అమలు చేయడానికి ఒక సమగ్ర మార్గదర్శి.

టూల్‌టిప్ అమలు: హోవర్ మరియు ఫోకస్ ద్వారా అందుబాటులో ఉండే సమాచారం

టూల్‌టిప్‌లు అనేవి చిన్న, సందర్భోచిత సహాయ సందేశాలు, ఇవి యూజర్ ఒక ఎలిమెంట్‌పై మౌస్ పాయింటర్‌ను హోవర్ చేసినప్పుడు లేదా ఫోకస్ చేసినప్పుడు కనిపిస్తాయి. అవి అదనపు సమాచారాన్ని అందించగలవు, ఒక ఎలిమెంట్ యొక్క ఉద్దేశాన్ని స్పష్టం చేయగలవు లేదా ఒక ఫీచర్‌ను ఎలా ఉపయోగించాలో సూచనలు ఇవ్వగలవు. అయితే, టూల్‌టిప్‌లను సరిగ్గా అమలు చేయకపోతే అవి యాక్సెసిబిలిటీకి పెద్ద అడ్డంకిగా మారవచ్చు. ఈ గైడ్, వైకల్యాలు ఉన్న వినియోగదారులతో సహా అందరికీ ఉపయోగపడే టూల్‌టిప్‌లను రూపొందించడానికి ఉత్తమ పద్ధతులను వివరిస్తుంది.

టూల్‌టిప్‌ల కోసం యాక్సెసిబిలిటీ ఎందుకు ముఖ్యం

యాక్సెసిబిలిటీ అనేది కేవలం నిబంధనలకు కట్టుబడి ఉండటమే కాదు; ఇది అందరికీ మెరుగైన వినియోగదారు అనుభవాన్ని సృష్టించడం. టూల్‌టిప్‌లు యాక్సెస్ చేయలేని విధంగా ఉన్నప్పుడు, స్క్రీన్ రీడర్‌లు, కీబోర్డ్ నావిగేషన్ లేదా స్పీచ్ ఇన్‌పుట్ వంటి సహాయక సాంకేతిక పరిజ్ఞానాలపై ఆధారపడే వినియోగదారులను ఇది మినహాయించవచ్చు. ఈ దృశ్యాలను పరిగణించండి:

యాక్సెసిబిలిటీ ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా, టూల్‌టిప్‌లు అందరి వినియోగదారు అనుభవానికి అడ్డంకి కాకుండా మెరుగుపరుస్తాయని మనం నిర్ధారించుకోవచ్చు.

యాక్సెస్ చేయగల టూల్‌టిప్‌ల కోసం కీలక సూత్రాలు

యాక్సెస్ చేయగల టూల్‌టిప్‌లను సృష్టించడానికి క్రింది సూత్రాలు చాలా ముఖ్యమైనవి:

  1. ప్రత్యామ్నాయ యాక్సెస్ అందించండి: టూల్‌టిప్‌లు హోవర్ మరియు కీబోర్డ్ ఫోకస్ రెండింటి ద్వారా యాక్సెస్ అయ్యేలా చూసుకోండి.
  2. ARIA అట్రిబ్యూట్‌లను ఉపయోగించండి: సహాయక సాంకేతిక పరిజ్ఞానాలకు టూల్‌టిప్‌లను సరిగ్గా గుర్తించి, వివరించడానికి ARIA (Accessible Rich Internet Applications) అట్రిబ్యూట్‌లను ఉపయోగించండి.
  3. ఫోకస్‌ను నిర్వహించండి: టూల్‌టిప్ ప్రదర్శించబడినప్పుడు మరియు దాచబడినప్పుడు ఫోకస్ ఎక్కడికి వెళ్తుందో నియంత్రించండి.
  4. తగినంత కాంట్రాస్ట్ ఉండేలా చూసుకోండి: టూల్‌టిప్ టెక్స్ట్ మరియు బ్యాక్‌గ్రౌండ్ మధ్య తగినంత రంగుల కాంట్రాస్ట్ అందించండి.
  5. తగినంత సమయం అనుమతించండి: టూల్‌టిప్ కంటెంట్‌ను చదవడానికి వినియోగదారులకు తగినంత సమయం ఇవ్వండి.
  6. వాటిని తొలగించగలిగేలా చేయండి: టూల్‌టిప్‌ను తొలగించడానికి స్పష్టమైన మార్గాన్ని అందించండి.
  7. అతిగా ఉపయోగించకుండా ఉండటం: టూల్‌టిప్‌లను తక్కువగా మరియు అవసరమైనప్పుడు మాత్రమే ఉపయోగించండి.

అమలు చేసే పద్ధతులు

1. హోవర్ మరియు ఫోకస్‌ను ఉపయోగించడం

యాక్సెస్ చేయగల టూల్‌టిప్‌లలో అత్యంత కీలకమైన అంశం ఏమిటంటే, అవి మౌస్ మరియు కీబోర్డ్ వినియోగదారులకు అందుబాటులో ఉండేలా చూసుకోవడం. అంటే టూల్‌టిప్ హోవర్‌లో మరియు ఎలిమెంట్ ఫోకస్‌ను పొందినప్పుడు రెండింటిలోనూ కనిపించాలి.

HTML:

<a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

వివరణ:

జావాస్క్రిప్ట్ (అధునాతన నియంత్రణ - ఐచ్ఛికం):

CSS సాధారణ చూపించు/దాచు కార్యకలాపాలను నిర్వహించగలదు, కానీ జావాస్క్రిప్ట్ మరింత బలమైన నియంత్రణను అనుమతిస్తుంది, ప్రత్యేకించి టూల్‌టిప్‌లు డైనమిక్‌గా రూపొందించబడినప్పుడు లేదా మరింత సంక్లిష్టమైన ప్రవర్తన అవసరమైనప్పుడు.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA అట్రిబ్యూట్‌లను ఉపయోగించడం

సహాయక సాంకేతిక పరిజ్ఞానాలకు సెమాంటిక్ సమాచారాన్ని అందించడానికి ARIA అట్రిబ్యూట్‌లు చాలా అవసరం. ఇక్కడ కీలక అట్రిబ్యూట్‌ల విచ్ఛిన్నం ఉంది:

ఉదాహరణ:

<button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>

జావాస్క్రిప్ట్ (aria-hidden కోసం):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. ఫోకస్‌ను నిర్వహించడం

ఒక టూల్‌టిప్ కనిపించినప్పుడు, అది సాధారణంగా ట్రిగ్గరింగ్ ఎలిమెంట్ నుండి ఫోకస్‌ను *దొంగిలించకూడదు*. ఫోకస్ టూల్‌టిప్‌ను ట్రిగ్గర్ చేసిన ఎలిమెంట్‌పైనే ఉండాలి. ఇది కీబోర్డ్ వినియోగదారులు అనూహ్యమైన అంతరాయాలు లేకుండా పేజీని నావిగేట్ చేయడం కొనసాగించగలరని నిర్ధారిస్తుంది.

అయితే, మీరు ఫోకస్‌ను టూల్‌టిప్‌కు తరలించాలనుకునే సందర్భాలు ఉండవచ్చు, ప్రత్యేకించి టూల్‌టిప్‌లో ఇంటరాక్టివ్ ఎలిమెంట్‌లు (ఉదా., లింక్‌లు, బటన్‌లు) ఉన్నప్పుడు. ఈ సందర్భంలో, ఇవి ఉండేలా నిర్ధారించుకోండి:

చాలా సందర్భాలలో, సరళత మరియు వినియోగం కోసం టూల్‌టిప్‌లోనే ఫోకస్ నిర్వహణను నివారించడం ఉత్తమం.

4. తగినంత కాంట్రాస్ట్ ఉండేలా చూసుకోవడం

చదవడానికి రంగుల కాంట్రాస్ట్ చాలా ముఖ్యం. మీ టూల్‌టిప్‌లలోని టెక్స్ట్ రంగుకు బ్యాక్‌గ్రౌండ్ రంగుతో తగినంత కాంట్రాస్ట్ ఉందని నిర్ధారించుకోండి. వెబ్ కంటెంట్ యాక్సెసిబిలిటీ గైడ్‌లైన్స్ (WCAG) సాధారణ టెక్స్ట్ కోసం కనీసం 4.5:1 మరియు పెద్ద టెక్స్ట్ (18pt లేదా 14pt బోల్డ్) కోసం 3:1 కాంట్రాస్ట్ నిష్పత్తిని సిఫార్సు చేస్తుంది.

మీ రంగుల ఎంపికలు యాక్సెసిబిలిటీ ప్రమాణాలకు అనుగుణంగా ఉన్నాయని ధృవీకరించడానికి ఆన్‌లైన్ కాంట్రాస్ట్ చెక్కర్‌లను ఉపయోగించండి. కాంట్రాస్ట్ చెక్కర్‌ల ఉదాహరణలు:

ఉదాహరణ (మంచి కాంట్రాస్ట్):

.tooltip {
  background-color: #000;
  color: #fff;
}

ఉదాహరణ (పేలవమైన కాంట్రాస్ట్):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. తగినంత సమయం అనుమతించడం

వినియోగదారులకు టూల్‌టిప్ కంటెంట్‌ను చదవడానికి తగినంత సమయం అవసరం. చాలా త్వరగా అదృశ్యమయ్యే టూల్‌టిప్‌లను నివారించండి. నిర్దిష్ట సంఖ్య అంటూ ఏదీ లేనప్పటికీ, కనీసం కొన్ని సెకన్ల ప్రదర్శన సమయాన్ని లక్ష్యంగా పెట్టుకోండి. అలాగే, వినియోగదారు ట్రిగ్గరింగ్ ఎలిమెంట్‌పై హోవర్ చేస్తున్నంత కాలం లేదా ఫోకస్ చేసినంత కాలం టూల్‌టిప్ కనిపించాలి. ఇతర ఈవెంట్‌ల కారణంగా మీరు టూల్‌టిప్‌ను తొలగించాల్సి వస్తే, టూల్‌టిప్ మూసివేయబడుతుందని సూచికను అందించండి.

టూల్‌టిప్ కంటెంట్ పొడవుగా ఉంటే, వినియోగదారు టూల్‌టిప్‌ను మాన్యువల్‌గా తొలగించడానికి ఒక మార్గాన్ని అందించడాన్ని పరిగణించండి (ఉదా., క్లోజ్ బటన్ లేదా ఎస్కేప్ కీ నొక్కడం).

6. వాటిని తొలగించగలిగేలా చేయడం

వినియోగదారు మౌస్‌ను దూరంగా తరలించినప్పుడు లేదా ఫోకస్‌ను తీసివేసినప్పుడు టూల్‌టిప్‌లు తరచుగా ఆటోమేటిక్‌గా అదృశ్యమవుతాయి, వాటిని మాన్యువల్‌గా తొలగించడానికి స్పష్టమైన మార్గాన్ని అందించడం మంచి పద్ధతి, ప్రత్యేకించి పొడవైన టూల్‌టిప్‌లు లేదా ఇంటరాక్టివ్ ఎలిమెంట్‌లు ఉన్న టూల్‌టిప్‌ల కోసం.

టూల్‌టిప్‌లను తొలగించే పద్ధతులు:

ఉదాహరణ (క్లోజ్ బటన్):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>

ఉదాహరణ (ఎస్కేప్ కీ):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

7. అతిగా ఉపయోగించకుండా ఉండటం

టూల్‌టిప్‌లను తక్కువగా మరియు అవి నిజంగా సహాయకరమైన సమాచారాన్ని అందించినప్పుడు మాత్రమే ఉపయోగించాలి. టూల్‌టిప్‌లను అతిగా ఉపయోగించడం ఇంటర్‌ఫేస్‌ను గందరగోళంగా మార్చగలదు, వినియోగదారుల దృష్టిని మళ్లించగలదు మరియు నిరాశపరిచే అనుభవాన్ని సృష్టించగలదు.

టూల్‌టిప్‌లకు ప్రత్యామ్నాయాలు:

అధునాతన పరిగణనలు

డైనమిక్ కంటెంట్

మీ టూల్‌టిప్ కంటెంట్ డైనమిక్‌గా రూపొందించబడితే (ఉదా., API నుండి లోడ్ చేయబడినా లేదా యూజర్ ఇన్‌పుట్ ఆధారంగా అప్‌డేట్ చేయబడినా), aria-describedby అట్రిబ్యూట్ మరియు టూల్‌టిప్ విజిబిలిటీ తదనుగుణంగా అప్‌డేట్ చేయబడ్డాయని నిర్ధారించుకోండి. ఈ అప్‌డేట్‌లను నిర్వహించడానికి జావాస్క్రిప్ట్ ఉపయోగించండి.

పొజిషనింగ్

మీ టూల్‌టిప్‌ల పొజిషనింగ్‌ను జాగ్రత్తగా పరిగణించండి. వాటిని ముఖ్యమైన కంటెంట్‌ను అస్పష్టం చేసే విధంగా లేదా లేఅవుట్ మార్పులకు కారణమయ్యే విధంగా ఉంచకుండా ఉండండి. విభిన్న స్క్రీన్ పరిమాణాలు మరియు రిజల్యూషన్‌లను దృష్టిలో ఉంచుకోండి మరియు టూల్‌టిప్‌లు ఎల్లప్పుడూ వ్యూపోర్ట్‌లో కనిపించేలా CSS ఉపయోగించండి.

మొబైల్ పరికరాలు

టూల్‌టిప్‌లు సాంప్రదాయకంగా హోవర్ ఇంటరాక్షన్‌లపై ఆధారపడతాయి, ఇవి టచ్-ఆధారిత పరికరాల్లో అందుబాటులో ఉండవు. మొబైల్ పరికరాల కోసం, ప్రత్యామ్నాయ ఇంటరాక్షన్ పద్ధతులను ఉపయోగించడాన్ని పరిగణించండి, అవి:

మీ టూల్‌టిప్‌లను పరీక్షించడం

మీ టూల్‌టిప్‌లు అన్ని వినియోగదారులకు అందుబాటులో ఉన్నాయని నిర్ధారించుకోవడానికి వాటిని క్షుణ్ణంగా పరీక్షించండి. మాన్యువల్ టెస్టింగ్ మరియు ఆటోమేటెడ్ యాక్సెసిబిలిటీ టెస్టింగ్ టూల్స్ కలయికను ఉపయోగించండి.

పరీక్షా పద్ధతులు:

అంతర్జాతీయీకరణ (i18n) మరియు స్థానికీకరణ (l10n)

ప్రపంచవ్యాప్త ప్రేక్షకుల కోసం టూల్‌టిప్‌లను అభివృద్ధి చేస్తున్నప్పుడు, అంతర్జాతీయీకరణ మరియు స్థానికీకరణను దృష్టిలో ఉంచుకోండి:

ముగింపు

యాక్సెస్ చేయగల టూల్‌టిప్‌లను అమలు చేయడానికి జాగ్రత్తగా ప్రణాళిక మరియు వివరాలపై శ్రద్ధ అవసరం. ఈ గైడ్‌లో వివరించిన సూత్రాలు మరియు పద్ధతులను అనుసరించడం ద్వారా, మీరు వారి సామర్థ్యాలతో సంబంధం లేకుండా అందరికీ ఉపయోగపడే టూల్‌టిప్‌లను సృష్టించవచ్చు. యాక్సెసిబిలిటీ అనేది నిరంతర ప్రక్రియ అని గుర్తుంచుకోండి, కాబట్టి మీ టూల్‌టిప్‌లు మీ వినియోగదారులందరి అవసరాలను తీరుస్తాయని నిర్ధారించుకోవడానికి వాటిని పరీక్షించడం మరియు మెరుగుపరచడం కొనసాగించండి.

వనరులు